<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 1. 布局标签 -->
    <!-- 
        1.1 div 块级标签:用该标签包裹的文本，会在页面中独占一行 
        !! 浏览器不识别 回车(换行符\n)，会被显示为一个空格
    -->
    ====
    段前
    <div>段中</div>
    段后
    ====
    <!-- 横线 - 独占一行 -->
    <hr>
    <!-- 
        1.2 span 行标签：用该标签包裹的文本，只会基于文本的内容进行空间分配
            => 提供后续CSS的修改接入节点功能
    -->
    一段文本
    <span>一段span文本</span>
    <hr>
    <!-- 2. 资源标签 
        ！！ 页面和资源必须同处于同一个服务器目录下 
    -->
    <!-- 
        2.1 a 标签 外部资源连接跳转标签 -> 超连接
            href 定义一个网站地址 
                => 相对路径地址:以展示的网页为参考，进行路径指向
                    注意协议:
                        file 协议：能够访问的路径是文件所在的整个磁盘
                        http|https：服务器协议，服务协议会指定可以访问根地址
                => 绝对路径地址 ( / => 根目录 )
                    注意：
                        file 协议：访问当前文件磁盘根目录
                        http|https：服务器协议，访问服务器开启的根目录
                => 协议路径地址: 协议://URL地址
            同时提供不同状态的颜色变化
    -->
    <a href="https://cn.bing.com/">必应</a>
    <!-- br 标签替代 \n 回车换行 -->
    <br>
    <a href="./01.文本和标签.html">01.文本和标签.html</a>
    <br>
    <a href="../../test.html">教学电脑上D盘下的test.html</a>
    <br>
    <a href="/test.html">教学电脑上D盘下的test.html</a>
    <hr>
    <!--
        2.2 img 图片标签，加载图片资源并显示
            src 定义路径加载的资源文件内容
            width 定义图片宽度
                 单位 px 屏幕像素点
            height 定义图片高度
            ！！ 宽度和高度同时定义，会产生图片变形
            ！！ 图片一般都是通过设置一边，忽略一边(自动)
    -->
    <img 
        src="https://search-operate.cdn.bcebos.com/c63f5b937296e91b1a9a79a63328b2a6.gif"
        width="200px"
    >
    <br>
    <!-- 
        2.3 视频，音频
    -->
    <video controls width="300px"
        src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"></video>
    <br>
    <audio  controls src=""></audio>
    <hr>
    <!--
    3. 表单标签：定义并处理用户操作行为
        3.1 单行输入标签
        3.2 多行输入标签
        3.3 单选、多选、下拉操作标签
        3.4 按钮标签
    -->
    <input type="text">
    <br><br>
    <textarea></textarea>
    <br><br>
    <!-- 单选的分组互斥，通过设置相同的name属性取值完成分组操作 -->
    <input type="radio" name="groupA" >A
    <input type="radio" name="groupA" >B
    <input type="radio" name="groupA" >C
    <input type="radio" name="groupA" >D
    <br>
    <input type="radio" name="groupB" >A
    <input type="radio" name="groupB" >B
    <input type="radio" name="groupB" >C
    <input type="radio" name="groupB" >D
    <br>
    <!-- 
        多选的分组，通过设置相同的name属性取值完成分组操作
                => 针对于最终向后端(java服务器)提交数据时，实现数据分组
    -->
    <input type="checkbox" name="groupC">java
    <input type="checkbox" name="groupC">html
    <input type="checkbox" name="groupC">css
    <input type="checkbox" name="groupC">js
    <br>
    <select>
        <!-- option 标签为文本内容格式标签 -->
        <option>选项A</option>
        <option>选项B</option>
        <option>选项C</option>
        <option>选项D</option>
        <option>选项E</option>
    </select>
    <br><br>
    <input type="button" value="按钮名称">
    <button>按钮名称</button>
    <br>
    <button>
        <img src="./imgs/search.png" width="12px">
        <span>搜索</span>
    </button>

    <br><br>
    <!-- input 功能扩展标签 -->
    <input type="color"><br>
    <input type="date"> <br>     
    <input type="range"><br>
    <input type="password"><br>
    <input type="hidden"><br>

    <!-- label 标签：和可输入的表达元素进行配置使用，一般用于为表单元素提供名字 -->
    <label for="username">登录名:</label>
    <input type="text" id="username">
    <br>
    <label for="password">登录密码:</label>
    <input type="password" id="password"> 
    <br>
    <br>
    <!-- 表单元素分组 -->
    <label>
        <span>登录名:</span>
        <input type="text">
    </label>
    <br><br>
    <!--
        form 表单组合元素
        action 属性取值是一个服务器地址或者其它页面
        method 定义请求类型
            默认值为get => 参数会出现在地址上
            修改post => 隐藏参数，但对直接指向的html文件跳转无效，必须是一个服务器地址才有效
    -->
    <form action="./01.文本和标签.html" method="post">
        <label>
            <span>登录名:</span>
            <input type="text" name="username">
        </label>
        <br>
        <label>
            <span>登录密码:</span>
            <input type="password" name="password">
        </label>
        <br>
        <!-- 
            将当前表单中的数据，通过action指向的地址进行传递 = 提交表单 
            只会提交表单中定义了 name 属性的 表单元素数据
        -->
        <input type="submit" value="提交按钮">
        <button type="submit">提交按钮</button>
        <br>
        <!-- 将按钮所在的表单元素内部的所有操作，恢复到初始状态 -->
        <input type="reset" value="内容重置">
        <button type="reset">内容重置</button>
    </form>

    <hr>
    <!-- 
    4. 表格标签
        table 表格渲染标签
            tr 表格行
            td 表格列(单元格)
            th 表格列(单元格) 自带加粗和居中效果
        border 为表格增加边框 => table 和 td 增加边框
    -->
    <table border="1px">
        <!-- 定义表格头 -->
        <thead>
            <tr>
                <!-- <td>编号</td>
                <td>姓名</td>
                <td>地址</td>
                <td>电话</td> -->
                <th>编号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>电话</th>
            </tr>
        </thead>
        <!-- 定义表格正文 -->
        <tbody>
            <tr>
                <td>10001</td>
                <td>于</td>
                <td>伟泽京市</td>
                <td>11098577872</td>
            </tr>
            <tr>
                <td>10002</td>
                <td>郭</td>
                <td>胡阳市</td>
                <td>17491070418</td>
            </tr>
            <tr>
                <td>10002</td>
                <td>郑</td>
                <td>Wauwatosa</td>
                <td>15708374145</td>
            </tr>
            <tr>
                <td>10002</td>
                <td>邱</td>
                <td>厦 志强码市</td>
                <td>026-99011491</td>
            </tr>
        </tbody>
    </table>

    <hr>
        <table border="1px">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>地址</th>
                <th>电话</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>10001</td>
                <td>于</td>
                <td colspan="2">伟泽京市</td>
                <!-- <td>11098577872</td> -->
            </tr>
            <tr>
                <td rowspan="2">10002</td>
                <td>郭</td>
                <td>胡阳市</td>
                <td>17491070418</td>
            </tr>
            <tr>
                <!-- <td>10002</td> -->
                <td>郑</td>
                <td>Wauwatosa</td>
                <td>15708374145</td>
            </tr>
            <tr>
                <td>10002</td>
                <td>邱</td>
                <td>厦 志强码市</td>
                <td>026-99011491</td>
            </tr>
        </tbody>
    </table>


    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>